<template>
	<view class="login-page">
		<view class="login-page-title">快捷登录</view>
		<view class="login-page-tips">未注册的号码验证后创建账号</view>
		<view class="input-bar">
			<input class="input" placeholder-class="input-plc" @input="phoneInput" :value="phoneNum" placeholder="输入手机号"></input>
		</view>
		
		<!-- <view class="other-options">
			<view class="option-item" @tap.stop="toRegister">没有账号？立即注册</view>
		</view> -->
		
		<largeBtn :disabled="btnDisabled" @btnClk="toNext">下一步</largeBtn>
		<view class="agreement-tips" @tap="toggleAgreementFlag">
			<image class="agree-icon" v-show="!agreementFlag" src="../../static/agreeIconGrey.png"></image>
			<image class="agree-icon" v-show="agreementFlag" src="../../static/agreeIconBlue.png"></image>
			<text class="tips-text">我已阅读并同意</text>
			<text class="agreement-name" @tap.stop="toAgreementPage">
				《隐私协议》
			</text>
		</view>
		<view class="other-way">
			<text class="other-way-tips">其他方式登录</text>
			<view class="other-way-item" @tap="wxLogin">
				<image class="way-icon" src="../../static/wxIcon.png"></image>
				<text class="way-name">微信登录</text>
			</view>
		</view>
		<alertPop :title="'温馨提示'" :content="'请先阅读并同意《隐私协议》'" :btnText="'我知道了'" @maskClk="hideTipsPop"
			@btnClk="hideTipsPop" v-show="tipsPopShow">
		</alertPop>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				phoneNum: '',
				agreementFlag: true,
				tipsPopShow: false
			}
		},
		computed: {
			...mapState(['fromVirtualId','fromUserId']),
			btnDisabled() {
				const flag = true
				// const flag = /^1\d{10}/.test(this.phoneNum)
				return !flag || !this.agreementFlag
			}
		},
		methods: {
			phoneInput(e) {
				this.phoneNum = e.target.value
			},
			toNext() {
				this.checkPhoneIsreged()
			},
			// 校验手机号是否注册过
			checkPhoneIsreged(){
				this.$api.checkPhoneIsreged(this.phoneNum).then((res)=>{
					if(!res){
						// 未注册
						uni.navigateTo({
							url: `/pages/login/passwordAndVcode?phone=${this.phoneNum}&pageType=1`
						})
					}else{
						// 已注册
						uni.navigateTo({
							url: `/pages/login/password?phone=${this.phoneNum}`
						})
					}
				})
			},
			toggleAgreementFlag() {
				this.agreementFlag = !this.agreementFlag
			},
			toAgreementPage() {
				uni.navigateTo({
					url: '/pages/agreement/index'
				})
			},
			hideTipsPop() {
				this.tipsPopShow = false
			},
			
			wxLogin() {
				if (!this.agreementFlag) {
					this.tipsPopShow = true
					return
				}
				
				this.showWXLoginTipsModal()
			},
			
			showWXLoginTipsModal(){
				uni.showModal({
					title: '温馨提示',
					content: '友好评将获取你的微信授权信息',
					success:(res) => {
						if (res.confirm) {
							//如果用户点击了确定按钮
							this.getUserWxProfile()
						} else if (res.cancel) {
							//如果用户点击了取消按钮
						    this.showWxLoginErrTips()
						}
					}
				});
			},
			
			getUserWxProfile(){
				uni.getUserProfile({
					desc: '授权登录注册',
					success: res => {
						this.$store.commit('setUserWxProfile',res.userInfo)
						this.getUserOpenid(res.userInfo)
					},
					fail: res => {
						//拒绝授权
						uni.showToast({
							title: '授权失败',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			
			showWxLoginErrTips(){
				uni.showToast({
					title: '您拒绝了授权',
					icon: 'error',
					duration: 2000
				});
			},
			getUserOpenid(userInfo){
				uni.login({
					 provider: 'weixin',
					 success:({code}) => {
						this.$api.getOpenid({ code:code }).then((res)=>{
							console.log(res)
							this.$store.commit('setUserWxOpenidData',res)
							this.loginByWx({
								account: res.openid,
								nickName: userInfo.nickName,
								avatar:userInfo.avatarUrl
							})
						})
					 },
					 fail: res => {
					  	//拒绝授权
					  	uni.showToast({
					  		title: '授权失败',
					  		icon: 'error',
					  		duration: 2000
					  	});
					 }
				})
			},
			
			loginByWx(data){
				this.$api.loginByWx(data).then((res)=>{
					// 微信登录，并且之前绑定过手机
					this.$setToken(res)
					this.$getGlobalDataWhenLogin()
					if(this.fromVirtualId){
                        uni.reLaunch({
					        url: `/pages/commentDetail/index?fromUserId=${this.fromUserId}&virtualId=${this.fromVirtualId}`
					    });
					}else{
	                    uni.reLaunch({
					        url: '/pages/index/index?type=1'
					    });
					}
				}).catch((res)=>{
					if(res.code * 1 === 1019 ){
						setTimeout(()=>{
					        uni.navigateTo({
					        	url: '/pages/login/bindPhone'
					        })
						},1000)
					}
				})
			},
			
			// 去注册
			// toRegister(){
			// 	// pageType: 1:绑定手机 2:注册账号
			// 	uni.navigateTo({
			// 		url: `/pages/login/bindPhone?pageType=2`
			// 	})
			// }
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		width: 670rpx;
		margin: 0 auto;
		padding-top: 54rpx;

		.login-page-title {
			font-size: 48rpx;
			font-weight: 400;
			color: #323746;
			line-height: 60rpx;
		}

		.login-page-tips {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #9196A0;
			line-height: 32rpx;
		}

		.input-bar {
			margin-top: 60rpx;
			margin-bottom: 120rpx;
			// margin-bottom: 40rpx;
			height: 120rpx;
			border-bottom: 2rpx solid #DDDDDD;
			display: flex;
			align-items: center;

			.input {
				width: 100%;
				font-size: 36rpx;
				font-weight: 400;
				color: #333;
				line-height: 44rpx;
			}
			.input-plc{
				color: #9196A0;
			}

		}

		.agreement-tips {
			margin-top: 40rpx;
			display: flex;
			justify-content: center;

			.agree-icon {
				width: 28rpx;
				height: 28rpx;
			}

			.tips-text {
				margin-left: 12rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #9196A0;
				line-height: 30rpx;
			}

			.agreement-name {
				font-size: 22rpx;
				font-weight: 400;
				color: #2D82FF;
				line-height: 30rpx;
			}
		}

		.other-way {
			margin: 0 auto;
			margin-top: 76rpx;
			width: 550rpx;
			border-top: 1rpx solid #DDDDDD;
			position: relative;
			padding-top: 74rpx;
			display: flex;
			justify-content: center;

			.other-way-tips {
				font-size: 24rpx;
				font-weight: 400;
				color: #9196A0;
				line-height: 32rpx;
				padding: 0 20rpx;
				background-color: #fff;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -50%);
			}

			.other-way-item {
				display: flex;
				align-items: center;
				flex-direction: column;

				.way-icon {
					width: 96rpx;
					height: 96rpx;
				}

				.way-name {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #4A505C;
					line-height: 32rpx;

				}
			}
		}
	}
	// .other-options{
	// 	margin:0rpx auto;
	// 	margin-bottom: 80rpx;
	// 	width: 660rpx;
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	.option-item{
	// 		font-size: 24rpx;
	// 		font-weight: 400;
	// 		color: #2D82FF;
	// 		line-height: 32rpx;
	// 	}
	// }
</style>
